<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>jmpress.js | tab control</title>

	<meta name="description" content="jmpress.js is a jQuery plugin to build a website on the infinite canvas">
	<meta name="author" content="Kyle Robinson Young @shama & Tobias Koppers @sokra" />
	<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<link href="style.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="../../dist/jmpress.all.js"></script>
</head>
<body>

<h1>Yet another tab control</h1>

<div class="nav" id="nav1" data-template="nav1">
	<section>
		<h1>Some Content</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>Another Content Page</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>Moooore Content</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>Here is Content too</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>This is a Content Page</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>Some Content</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>Another Content Page</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>Moooore Content</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>Here is Content too</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>This is a Content Page</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>
</div>


<h1>And one more again...</h1>

<div class="nav" id="nav2" data-template="nav2">
	<section>
		<h1>Some Content</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>Another Content Page</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>Moooore Content</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>Here is Content too</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>This is a Content Page</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>Some Content</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>Another Content Page</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>Moooore Content</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>Here is Content too</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>

	<section>
		<h1>This is a Content Page</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
	</section>
</div>

<h1>Amazing?</h1>

<p>You can click the steps!</p>
<p>&nbsp;</p>

<script type="text/javascript">
$(function() {

	/* FIRST */

	$.jmpress("template", "nav1", {
		children: function(idx) {
			var distanceX = 240;
			var distanceY = 170;
			var config = {
				scale: 0.2,
				y: -1,
				x: ((idx%5) - 2) * (1/2),
				rotateY: 360,
				secondary: {
					"": "self",
					rotateY: 0,
					x: 0,
					y: 0,
					scale: 1
				}
			};
			if(idx % 2 != 0) {
				config.y = -config.y;
			}
			config.x = config.x * distanceX;
			config.y = config.y * distanceY;
			return config;
		}
	});
	$('#nav1').jmpress({
		stepSelector: "section",
		containerClass: "jmpress",
		hash: { use: false },
		fullscreen: false,
		duration: {
			defaultValue: 3000
		}
	});

	/* SECOND */

	$.jmpress("template", "nav2", {
		children: function(idx) {
			var distanceX = 240;
			var distanceY = 170;
			var config = {
				scale: 0.2,
				y: -1,
				x: ((idx%5) - 2) * (1/2),
				rotateX: 360,
				secondary: {
					"": "self",
					rotateX: 0,
					x: 0,
					y: 0,
					scale: 1
				}
			};
			if(idx % 2 != 0) {
				config.y = -config.y;
			}
			config.x = config.x * distanceX;
			config.y = config.y * distanceY;
			return config;
		}
	});
	$('#nav2').jmpress({
		stepSelector: "section",
		containerClass: "jmpress",
		hash: { use: false },
		fullscreen: false,
		duration: {
			defaultValue: 3923
		}
	});
});
</script>

</body>
</html>